<template>
    <div class="calendar-list">
        <div class="list-header">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>日</span>
        </div>
        <div class="list-body">
            <!-- <span class="off">29</span>
            <span class="off">30</span>
            <span class="active">1</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span> -->
            <span
                v-for="item in lists"
                :class="styleObj(item)"
                @click="handleClick(item)"
            >{{ item.date }}</span>
        </div>
    </div>
</template>

<script setup>
import {computed } from 'vue'
import { storeToRefs } from 'pinia';

import { useCalendarStore } from '@/stores/calendar';

const store = useCalendarStore()
const {lists,date} = storeToRefs(store)
const {lastMonth,nextMonth} = store

const styleObj = computed(() => {
    return (item) => {
        return{
            off:item.type !== 'this',
            active: item.date === date.value && item.type === 'this',
        }
    }
})

const handleClick = (item) => {
    if(item.type === 'last'){
        lastMonth()
    }else if (item.type === 'next'){
        nextMonth()
    }
    date.value = item.date
}

</script>

<style lang="scss" scoped>
.calendar-list{
    padding: 0 20px;
    height: 400px;
    background-color: #fff;
    .list-header {
        display: flex;
        gap: 20px;
        span{
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            color: #333;
            &:nth-child(6),
            &:nth-child(7){
                color: #f11;
            }
        }
    }
    .list-body{
        display: grid;//grid 网格
        grid-template-columns: repeat(7,1fr);//columns 列
        grid-template-rows: repeat(6,1fr);//rows 行
        gap: 20px;
        span{
            display: flex;
            justify-content: center;//content 内容
            align-items: center;
            padding: 9px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            &:nth-child(7n),
            &:nth-child(7n + 6){
                color: #eb3333;
            }
            &.off{
                opacity: 0.3;
            }
            &:hover{
                background: rgba(78,110,242,0.1);
            }
            &.active{
                border: 2px solid #4e6ef2;
            }
        }

    }
}
</style>